<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="商品分类">
        <el-select v-model="goods.sortId" placeholder="请选择">
          <el-option
            v-for="sort in sorts"
            :key="sort.id"
            :label="sort.title"
            :value="sort.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品类型">
        <el-radio v-model="goods.isType" :label="types.one"></el-radio>
        <el-radio v-model="goods.isType" :label="types.two"></el-radio>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="goods.name"/>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="goods.price"/>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model="goods.total"/>
      </el-form-item>
      <el-form-item label="商品简介">
        <el-input
          style="width: 500px"
          type="textarea"
          :rows="10"
          placeholder="请输入内容"
          v-model="goods.summary">
        </el-input>
      </el-form-item>

      <el-form-item label="标签">
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
      </el-form-item>

      <el-form-item label="商品图片">
        <el-upload
          action="http://localhost:8080/upload/upload"
          list-type="picture-card"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="'http://rj0387v46.hn-bkt.clouddn.com/'+dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <div v-for="image of imageList">
          <el-button type="primary" @click="handleDeleteImage(image)" style="">删除图片</el-button>
          <img :src="'http://rj0387v46.hn-bkt.clouddn.com/'+image" alt="" width="200px">
          <el-button type="primary" @click="handleImage(image)">设置为主图片</el-button>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="add">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import goods from '../../api/goods'
  import sort from "../../api/sort";
  export default {
    data(){

      return{
        goods:{
          image:""
        },
        saveBtnDisabled:false,
        sorts:[],
        types:{},
        dynamicTags: [], //标签数组
        inputVisible: false,
        inputValue: '', //输入的标签

        dialogImageUrl: '',
        dialogVisible: false,
        imageList:[],  //图片库,
        img:{
          img:"",
          goodsId:"",
          isOne:1
        },
        imgVo:{
          imgs:{},
          imageList:[]
        }
      }
    },
    created() {
      this.getSortAll()
      if(this.$route.params && this.$route.params.id){
        this.queryById(this.$route.params.id);
      }
    },
    methods: {
      getSortAll(){
        sort.getSortAll().then(res=>{
          this.sorts = res.data
        })
        goods.getType().then(res=>{
          this.types = res.data
        })
      },
      add(){
        if(this.$route.params && this.$route.params.id){
          if(this.dynamicTags.length==0){
            let a = "该商品没有添加标签"
            this.dynamicTags.push(a)
          }
          goods.update(this.goods,this.dynamicTags).then(res=>{
            this.$message.success(res.message)
            this.img.goodsId = this.$route.params.id
            this.imgVo.imgs=this.img;
            this.imgVo.imageList=this.imageList;
            this.handleImage(this.goods.image);
            goods.editImgs(this.imgVo).then(res=>{
            })
            this.$router.push({path:`/goods/list`})
          })
        }else {
          if(this.dynamicTags.length==0){
            let a = "该商品没有添加标签"
            this.dynamicTags.push(a)
          }
          goods.add(this.goods,this.dynamicTags).then(res=>{
            this.img.goodsId = res.data
            this.$message.success(res.message)
            this.imgVo.imgs=this.img;
            this.imgVo.imageList=this.imageList;
            goods.addImgs(this.imgVo).then(res=>{
            })
            this.$router.push({path:`/goods/list`})
          })
        }
      },
      queryById(id){
        goods.getById(id).then(res=>{
          this.goods = res.data.goods
          this.dynamicTags = res.data.dynamicTags
          this.imageList = res.data.imageList
          this.img.img = res.data.img
        })
      },

      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

      handleImage(image){
        this.goods.image=image;
        this.img.isOne=0;
        this.img.img=image;
        this.$message.success("设置成功")
      },
      handleDeleteImage(image){
        this.imageList.splice(this.imageList.indexOf(image),1)
        this.$message.success("删除成功")
      },
      handleRemove(file, fileList) {
        this.imageList.splice(this.imageList.indexOf(file.response.data),1)
        console.log(this.imageList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.response.data;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        this.imageList.push(res.data)
        console.log(this.imageList)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||file.type === 'image/jpg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
